<template>
  <div class="page">
    <h2 class="title">基本信息</h2>
    <!-- 单行 开始 -->
    <div class="row_box">
      <div class="cell">
        <span class="name">头像：</span>
        <div class="txt">
          <img :src="profile.avatar" alt="" class="avatar" />
        </div>
      </div>
    </div>
    <!-- 单行 结束 -->

    <!-- 单行 开始 -->
    <div class="row_box">
      <div class="cell">
        <span class="name">用户ID：</span>
        <div class="txt">{{ profile.cuserId }}</div>
      </div>
      <div class="cell">
        <span class="name">系统：</span>
        <div class="txt">{{ profile.userId }}</div>
      </div>
    </div>
    <!-- 单行 结束 -->

    <!-- 单行 开始 -->
    <div class="row_box">
      <div class="cell">
        <span class="name">昵称：</span>
        <div class="txt">{{ profile.username }}</div>
      </div>
      <div class="cell">
        <span class="name">设备：</span>
        <div class="txt">{{ profile.userId }}</div>
      </div>
    </div>
    <!-- 单行 结束 -->

    <!-- 单行 开始 -->
    <div class="row_box">
      <div class="cell">
        <span class="name">年龄：</span>
        <div class="txt">{{ profile.age }}</div>
      </div>
      <div class="cell">
        <span class="name">版本：</span>
        <div class="txt">{{ profile.appVersion }}</div>
      </div>
    </div>
    <!-- 单行 结束 -->
    <!-- 单行 开始 -->
    <div class="row_box">
      <div class="cell">
        <span class="name">城市：</span>
        <div class="txt">{{ profile.livingCity }}</div>
      </div>
      <div class="cell">
        <span class="name">IP：</span>
        <div class="txt">{{ profile.userId }}</div>
      </div>
    </div>
    <!-- 单行 结束 -->
    <!-- 单行 开始 -->
    <div class="row_box">
      <div class="cell">
        <span class="name">注册时间：</span>
        <div class="txt">{{ profile.registerDate }}</div>
      </div>
      <div class="cell">
        <span class="name">状态：</span>
        <div class="txt">{{ profile.status == 0?'正常':'封禁'  }}</div>
      </div>
    </div>
    <!-- 单行 结束 -->
    <!-- 单行 开始 -->
    <div class="row_box">
      <div class="cell">
        <span class="name">职业：</span>
        <div class="txt">{{ profile.profession }}</div>
      </div>
      <!-- <div class="cell">
        <span class="name">审核状态：</span>
        <div class="txt">{{ userInfo.userId }}</div>
      </div> -->
      <div class="cell">
        <span class="name">爱好：</span>
        <div class="txt">{{ profile.hobby }}</div>
      </div>
    </div>
    <!-- 单行 结束 -->
    <!-- 单行 开始 -->
    <div class="row_box">
      <div class="cell">
        <span class="name">会员：</span>
        <div class="txt">{{ vipInfo.status == 1 ||vipInfo.status == 3?'会员':'非会员' }}</div>
      </div>
      <div class="cell">
        <span class="name">情感状态：</span>
        <div class="txt">{{ EMOTIONLIST[profile.emotion] }}</div>
      </div>
    </div>
    <!-- 单行 结束 -->
    <!-- 单行 开始 -->
    <div class="row_box">
      <div class="cell">
        <span class="name">联系方式：</span>
        <div class="txt">{{ profile.account }}</div>
      </div>
    </div>
    <!-- 单行 结束 -->

    <h2 class="title">相册信息</h2>
    <div class="img_list">
      <div class="box" v-for="(item, index) in photoList" :key="index">
         <!-- src="http://8.135.99.57:89/group1/M00/00/00/rBdsOGAxw56ATRsCAALfoU9ZDSc453.jpg" -->
        <el-image :src="item.url" :preview-src-list="showImage(photoList)" fit="cover">
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { GETREGISTERINFO } from "@/http/interface";
import {EMOTIONLIST} from '@/common/constants'
export default {
  data() {
    return {
      formInline: {},
      tableData: [],
      userInfo: {},
      profile: {},
      certification: {},
      vipInfo: {},
      photoList: [],
      EMOTIONLIST:EMOTIONLIST
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    /** 获取详情 */
    getInfo() {
      let _this = this;
      let o = this.$route.query;
      let oParams = {};
      oParams.userId = o.id;
      GETREGISTERINFO(oParams).then((res) => {
        let obj = res.data || {};
        _this.userInfo = obj;
        _this.profile = obj.profile || {};
        _this.certification = obj.certification || {};
        _this.vipInfo = obj.vip || {};
        _this.photoList = obj.photoList || [];
      });
    },

    /** 展示图片 */
    showImage(list) {
      if (!list || list.length <= 0) {
        return [];
      }
      let arr = [];
      list.map((k) => {
        arr.push(k.url);
      });
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 10px;
  .title {
    font-size: 14px;
    // font-weight: normal;
  }
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 100%;
  }
}
.row_box {
  width: 50%;
  display: flex;
  margin: 10px 0;
  .cell {
    flex: 1;
    display: flex;
    color: #333;
    .name {
      width: 80px;
      text-align: right;
      font-size: 14px;
      color: #999;
    }
    .txt {
      font-size: 14px;
      flex: 1;
    }
  }
}

// 相册
.img_list {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  .box {
    width: 140px;
    height: 140px;
    overflow: hidden;
    margin: 0 15px 15px 0;
    border-radius: 4px;
  }
}
</style>
